<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style/style.css" />
  <link rel="stylesheet" id="extraCss" href="" />
  <title data-i18n="main.programName">雀魂Plus</title>
</head>

<body>
  <div id="titlebar">
    <h1 data-i18n="main.programName">雀魂Plus</h1>
    <span class="close-btn" id="closeBtn"></span>
  </div>
  <div id="main-context">
    <!-- 左侧选单 -->
    <div id="left-panel">
      <ul>
        <li data-target="extensionPage" data-i18n="main.extension">扩展</li>
        <li data-target="resourcepackPage" data-i18n="main.resourcepack">
          资源包
        </li>
        <li data-target="toolPage" data-i18n="main.tool">工具箱</li>
        <li data-target="settingPage" data-i18n="main.setting">设置</li>
        <li data-target="aboutPage" data-i18n="main.about">关于</li>
      </ul>
    </div>

    <!-- 扩展页面 -->
    <section data-name="extensionPage">
      <button id="refreshExtension" class="big-btn refresh-btn"></button>
      <button id="openFolderExtension" class="big-btn openfolder-btn">
        <i class="material-icons">folder_open</i>
      </button>
      <button id="installExtension" class="big-btn install-btn"></button>
      <button id="editExtension" class="big-btn edit-btn"></button>
      <div id="ExtensionInfos" class="info-cards"></div>
    </section>

    <!-- 资源包页面 -->
    <section data-name="resourcepackPage">
      <button id="refreshResourcePack" class="big-btn refresh-btn"></button>
      <button id="openFolderResourcePack" class="big-btn openfolder-btn">
        <i class="material-icons">folder_open</i>
      </button>
      <button id="installResourcePack" class="big-btn install-btn"></button>
      <button id="editResourcePack" class="big-btn edit-btn"></button>
      <div id="ResourcePackInfos" class="info-cards"></div>
    </section>

    <!-- 工具页面 -->
    <section data-name="toolPage">
      <button id="refreshTool" class="big-btn refresh-btn"></button>
      <button id="openFolderTool" class="big-btn openfolder-btn">
        <i class="material-icons">folder_open</i>
      </button>
      <button id="installTool" class="big-btn install-btn"></button>
      <button id="editTool" class="big-btn edit-btn"></button>
      <div id="ToolInfos" class="info-cards"></div>
    </section>

    <!-- 设置面板 -->
    <section data-name="settingPage">
      <button id="save-configs" class="big-btn"></button>
      <div id="setting-inner">
        <h3>窗口</h3>
        <input type="checkbox" name="windowSettings1" id="windowSettings1" /><label
          for="windowSettings1">设置描述（Text）</label>
        <h3>更新</h3>
        <input type="checkbox" name="updateSettings1" id="updateSettings1" /><label for="updateSettings1">获取浏览版(Get
          Pre-releases)</label>
      </div>
    </section>

    <!-- 关于页面 -->
    <section data-name="aboutPage">
      <div id="about-inner"></div>
    </section>

    <!-- 底部面板 -->
    <div id="bottom-panel">
      <span id="serverInfo" data-server-index="0">
        <span id="serverInfoTitle" data-i18n="main.server">服务器</span>
        <span>:&nbsp;</span>
        <span id="serverText" data-i18n="main.loading">加载中</span>
        <span id="serverIndexNum"></span>
      </span>
      <span id="pingInfo" class="offline">
        <span data-i18n="main.delay">Ping</span>
        <span>:&nbsp;</span>
        <span id="pingText">--</span>
        <span data-i18n="main.millisecond">ms</span>
      </span>
      <button id="launch" data-i18n="main.launch">
        启动游戏
      </button>
    </div>
  </div>

  <!-- 版本卡标签 -->
  <div id="update-card" class="update-card">
    <h3 data-i18n="update.newVersionWasFound">发现新版本</h3>
    <p>
      <span data-i18n="update.currentVersion">您的版本</span>
      <span id="localVersion">v1.0.0</span><br />
      <span data-i18n="update.latestVersion">最新版本</span>
      <span id="remoteVersion">v1.0.0</span><br />
      <span data-i18n="update.publishAt">发布于</span>
      <span id="publishTime">2000/2/30 下午11:11:11</span>
    </p>
    <button id="updateCard_close" class="updateCard_close" data-i18n="update.tellMeNextTime">
      下次提醒我
    </button>
    <button id="updateCard_view" class="updateCard_view" data-i18n="update.gotoPublishPage">
      前往发布页
    </button>
    <button id="updateCard_autoupdate" class="updateCard_view hide" data-i18n="update.updateNow">
      下载更新
    </button>
  </div>
  <div id="download-card" class="update-card">
    <h3 id="downloadCardTitle" data-i18n="update.downloading">
      正在下载更新
    </h3>
    <p id="downloadCardText">
      <span data-i18n="update.downloadingTip">正在从服务器获取更新中</span>
      <br />
      <span data-i18n="update.pleaseWait">请稍后……</span>
      <br />
      <span id="downloadCardSpeed" data-i18n="update.connecting">
        连接资源……
      </span>
    </p>
    <button id="downloadCard_install" class="updateCard_view" disabled data-i18n="update.installAndRelaunch">
      安装并重启
    </button>
  </div>
  <!-- 版本卡标签结束 -->

  <script>
    require('./main.js')
  </script>
</body>

</html>